<div class="flex-window stretch">
    <div class="flex-window-head">

        <div class="clearfix padding padding-sm">

            <div class="flex-header flex-horizontal margin-bottom">
                <div class="btn-group">
                    <button type="button" class="btn btn-primary"
                            data-bind="click: refresh, enable: !spinners.refresh(), css: { 'btn-spinner': spinners.refresh() }">
                        <i class="icon-refresh"></i>
                        <span>Refresh</span>
                    </button>
                </div>
                <div>
                    <input class="form-control" placeholder="Filter" data-bind="textInput: filter">
                </div>
                <div data-bind="visible: !noLeader()">Term: <span data-bind="text: topology().currentTerm().toLocaleString()"></span></div>
                <div class="flex-separator"></div>
                <div>
                    <button class="btn btn-default" data-bind="click: exportToFile">
                        <i class="icon-export"></i><span>Export</span>
                    </button>
                </div>
                <div data-bind="visible: !noLeader()">
                    <button class="btn btn-default" title="Cluster observer won't be making any decisions"
                            data-bind="click: suspendObserver, visible: !$root.observerSuspended(), enable: !spinners.toggleObserver(), css: { 'btn-spinner': spinners.toggleObserver() }">
                        <i class="icon-pause"></i>
                        <span>Suspend cluster observer</span>
                    </button>
                    <button class="btn btn-success" title="Resume cluster observer"
                            data-bind="click: resumeObserver, visible: $root.observerSuspended(), enable: !spinners.toggleObserver(), css: { 'btn-spinner': spinners.toggleObserver() }">
                        <i class="icon-play"></i>
                        <span>Resume cluster observer</span>
                    </button>
                </div>
            </div>
        </div>

    </div>
    <div class="flex-window-scroll">
        <div class="scroll-stretch">
            <div class="panel-body">
                <virtual-grid class="resizable documents-grid" params="controller: gridController, emptyTemplate: 'empty-cluster-log-template'"></virtual-grid>
            </div>
        </div>
    </div>
    <div class="has-error" data-bind="visible: termChanged()">
        <div class="help-block">
            <i class="icon-danger"></i><span>A term has changed. Your results are stale. <a href="#" data-bind="click: refresh">Refresh.</a></span>
        </div>
    </div>
</div>
<script type="text/html" id="empty-cluster-log-template">
    <div class="text-danger" data-bind="visible: $root.noLeader">
        Cluster Observer Log entries are only available on <strong>Leader</strong> node.
    </div>
    <div data-bind="visible: !$root.noLeader()">
        No entries found.
    </div>
</script>
<div class="tooltip json-preview lg js-observer-log-tooltip" style="opacity: 0">
</div>
